Tak asing rasanya jika sobat menemukan Powered by blogger [ Diberdayakan oleh blogger ] pada bagian footer blog anda, Biasanya tulisan ini akan muncul jika sobat menggunakan template bawaan dari blogger. Tampilannya seperti dibawah ini
Gambar 1.1. Kalimat pada bagian footer
Untuk tutorial kali ini saya akan mengajarkan cara untuk menghapus kalimat tersebut
1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget
2. Cari kode <!-- outside of the include in order to lock Attribution widget --> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)
3. Setelah ketemu hapus kodeyang ada dibawah kalimat tersebut
1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat 2. Pilih Tata Letak , lalu Tambah Gadget 3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript 4. Lalu muncul halaman baru lagi 5. Isi Judul, dan isikan kode berikut pada kontennya
Refresh dalam bahasa indonesia dapat dikatakan adalah penyegaran, tapi apa yang dimaksud refresh pada blog? Mungkin sama saja yang berarti penyegaran / muat ulang. Sekarang auto refresh dapat kita masukan kedalam dunia blog sehingga para pengunjung / visitor sobat tidak perlu repot-repot menekan tombol F5
Berikut caraMembuat auto refresh pada blog
1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget
Gambar 1.1. Edit HTML
Gambar 1.2. Lanjutkan
2. Cari kode <head> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)
3. Setelah ketemu letakan kode dibawah ini tepat dibawah kode yang tadi
<meta http-equiv="refresh" content="10"/>
Untuk angka yang bewarna merah adalah waktu auto refresh
4. Simpan templatenya
Untuk yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya
Memasang gadget share facebook pada blog ini bertujuan untuk mempublikasikan atau sharing posting atau artikel blog kita ke teman blogger dan memperluas jaringan blog sobat (Meningkatkan reputasi blog), serta dapat juga mendatangkan banyak pengunjung (Apa bedanya sama reputasi?)/ Untuk membuatnya ikuti langkah dibawah ini
1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget
Gambar 1.1. Edit HTML
Gambar 1.2. Lanjutkan
2. Cari kode <span class='post-author vcard'>(Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)
3. Setelah ketemu letakan kode dibawah ini tepat dibawah kode yang tadi
Ketika pertama kali sobat membuat blog, ada garis kecil kecil (bar) memanjang berupa logo blogger, kotak pencarian, dan lain sebagainya seperti gambar berikut:
Gambar 1.1. Navigation Bar (Navbar)
Bar tersebut bisa kita hilangkan supaya tampilan blog lebih enak untuk dilihat.
Caranya sebagai berikut ini:
1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget
2. Cari kode ]]></b:skin>(Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)
3. Setelah ketemu letakan kode dibawah ini tepat diatas kode yang tadi
4. Jika Cara tersebut tidak bisa cari kode <body>(Gunakan CTRL+F atau F3 Untuk mempercepat pencarian) 5. Lalu letakan kode dibawah ini tepat dibawah kode yang tadi
Supaya sobat tidak repot-repot copy paste artikel sobat ke facebook, sediakanlah tombol Share to Facebook di setiap artikel blog sobat. Caranya sebagai berikut
1. Masuk ke Dasboard lalu klik Blog sobat 2. Pilih ke Template 3. Lalu pilih Edit HTML dan pilih lanjutkan 4. Jangan lupa centang Expand Template Widget 5. Cari kode berikut
<b:if cond='data:top.showAuthor'>
Gambar 1.1 Kode yang di temukan
6. Letakan kode dibawah ini tepat diatas kode yang tadi
Tutorial kali ini akan membahas postingan yang berjudul Cara Membuat / Memasang Emoticon Pada Kotak Komentar Blog. Bukankah unik jika emoticon menghiasi kotak komentar blog sobat?? Apalagi Emoticon ini bisa bergerak seperti emoticon kaskus. Berikut Screenshotnya
Unyu-unyu ya? kalau begitu, langsung saja ke pembahasanya 1. Masuk ke Dasboard lalu klik Blog sobat 2. Pilih ke Template 3. Lalu pilih Edit HTML dan pilih lanjutkan 4. Centang Expand Template Widget 5. Cari kode berikut
</body>
(Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)
6. Letakan kode berikut tepat diatas kode yang tadi
Membuat menu header blog itu sangat mudah. Manfaatnya adalah mempermudah user / pengunjung blog bernavigasi di blog kita, sehingga memperbesar pageview.
Berikut adalah screenshot yang Tutorial Blogger miliki
Sebelum kita mulai langkah-langkahnya sebaiknya baca doa terlebih dahulu agar semua ini berjalan dengan lancar :)
Ayo kita mulai 1. Masuk ke Dasboard lalu klik Blog sobat 2. Pilih ke Template 3. Lalu pilih Edit HTML dan pilih lanjutkan 4. Centang Expand Template Widget 5. Cari kode
<b:section class='header' id='header'
(Gunakan CTRL+F atau F3 Untuk mempercepat pencarian) 6. Setelah ketemu sobat akan melihat kode seperti ini
Siang hari kali ini Tutorial Blogger akan memberikan postingan yang berbeda, yaitu Cara membuat Halaman 123 / Page Number Navigation. Kemarin Tutorial blogger sempat jalan-jalan ke blog teman, eh malah lihat postingan yang berjudul Cara membuat Halaman 123 / Page Number Navigation. Tutorial Blogger pun sempat meminta ijin untuk menyebarkannya, dan akhirnya di perbolehkan
Berikut screenshot nya:
Sedangkan untuk hasil dari navigasi ini bisa sobat lihat di sini
Berikut adalah Cara membuat Halaman 123 / Page Number Navigation: 1. Masuk ke Dasboard lalu klik Blog sobat 2. Pilih ke Template 3. Lalu pilih Edit HTML dan pilih lanjutkan 4. Centang Expand Template Widget 5. Cari kode ]]></b:skin>(Gunakan CTRL+F atau F3 Untuk mempercepat pencarian) 6. Setelah ketemu letakan kode dibawah ini tepat diatas kode yang tadi
Nah pada malam hari kali ini Tutorial Blogger akan memberikan tutorial yang berjudul Cara Membuat / Memasang Emoticon Kaskus Pada Blog. Memang emoticon itu memiliki beberapa jenis seperti facebook, yahoo, dan kaskus. Semuanya itu sebetulnya sama saja, cuma simbonya saja yang berbeda dari ketiga website tersebut.
Berikut adalah Cara Membuat / Memasang Emoticon Kaskus Pada Blog:
1. Masuk ke Dasboard lalu klik Blog sobat 2. Pilih ke Template 3. Lalu pilih Edit HTML dan pilih lanjutkan 4. Centang Expand Template Widget 5. Cari kode ]]></b:skin> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian) 6. Setelah ketemu letakan kode dibawah ini tepat diatas kode yang tadi
#kaskusemoticon {
width:auto;
margin:10px;
padding:10px; }
7. Setelah itu cari lagi kode </body> dan letakan kodeyang ada di bawah ini tepat diatas
Pada siang hari kali ini Tutorial Blog akan memberikan tutorial yang berjudul Cara Membuat Link Berkedip Warna Warni. Efek ini akan membuat link yang ada di blog sobat akan berkedip dan bewarna warni, jadi bisa di bilang cukup menarik :). Langsung saja ke Tutorialnya
1. Masuk ke Dasboard lalu klik Blog sobat 2. Pilih ke Template 3. Lalu pilih Edit HTML dan pilih lanjutkan 4. Centang Expand Template Widget 5. Cari kode </head>(Gunakan CTRL+F atau F3 Untuk mempercepat pencarian) 6. Setelah ketemu letakan kode berikut tepat dibawahkode yang tadi
1. Masuk ke Dasboard lalu klik Blog sobat 2. Pilih ke Template 3. Lalu pilih Edit HTML dan pilih lanjutkan 4. Centang Expand Template Widget 5. Cari kode <title><data:blog.pageTitle/></title>(Gunakan CTRL+F atau F3 Untuk mempercepat pencarian) 6. Setelah ketemu hapus kode yang tadi lalu ganti dengan kode dibawah ini
<b:include data='blog' name='all-head-content'/> <script language='JavaScript'> var txt="<data:blog.pageTitle/>"; var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>
7. Simpan Untuk yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya
Untuk kode bewarna biru adalah kecepatan pergerakan
1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat 2. Pilih Tata Letak , lalu Tambah Gadget 3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript 4. Lalu muncul halaman baru lagi 5. Kosongkan Judul, dan isikan kode berikut pada kontennya
1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat 2. Pilih Tata Letak , lalu Tambah Gadget 3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript 4. Lalu muncul halaman baru lagi 5. Kosongkan Judul, dan isikan kode berikut pada kontennya
<script>//mouse //Circling text trail- Tim Tilton //Website: http://www.tempermedia.com/ //Visit http://www.dynamicdrive.com for this script and more function cursor_text_circle(){ // your message here var msg='selamat datang'.split('').reverse().join(''); var font='Verdana,Arial'; var size=3; // up to seven var color='##0000FF'; // This is not the rotation speed, its the reaction speed, keep low! // Set this to 1 for just plain rotation w/out drag var speed=.3; // This is the rotation speed, set it negative if you want // it to spin clockwise var rotation=-.2; // Alter no variables past here!, unless you are good //--------------------------------------------------- var ns=(document.layers); var ie=(document.all); var dom=document.getElementById; msg=msg.split(''); var n=msg.length; var a=size*13; var currStep=0; var ymouse=0; var xmouse=0; var props="<font face="+font+" color="+color+" size="+size+">"; if (ie) window.pageYOffset=0 // writes the message if (ns){ for (i=0; i < n; i++) document.write('<layer left="0" top="0" width="+a+" name="nsmsg'+i+'" height="+a+"><center>'+props+msg[i]+'</font></center></layer>'); } else if (ie||dom){ document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">'); for (i=0; i < n; i++) document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>'); document.write('</div></div>'); } (ns)?window.captureEvents(Event.MOUSEMOVE):0; function Mouse(evnt){ ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position } if (ns||ie||dom) (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse; var y=new Array(); var x=new Array(); var Y=new Array(); var X=new Array(); for (i=0; i < n; i++){ y[i]=0; x[i]=0; Y[i]=0; X[i]=0; } var iecompattest=function(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body; } var makecircle=function(){ // rotation properties if (ie) outer.style.top=iecompattest().scrollTop+'px'; currStep-=rotation; for (i=0; i < n; i++){ // makes the circle var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style; d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : ''); d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval } } var drag=function(){ // makes the resistance y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed); x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed); for (var i=1; i < n; i++){ y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed); x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed); } makecircle(); // not rotation speed, leave at zero setTimeout(function(){drag();},10); } if (ns||ie||dom) if ( typeof window.addEventListener != "undefined" ) window.addEventListener( "load", drag, false ); else if ( typeof window.attachEvent != "undefined" ) window.attachEvent( "onload", drag ); else { if ( window.onload != null ) { var oldOnload = window.onload; window.onload = function ( e ) { oldOnload( e ); drag(); }; } else window.onload = drag; } } cursor_text_circle(); </script>
6. Setelah Itu simpan
Untuk kode bewarna biru adalah kalimat yang akan mengikuti kursor
Untuk kode bewarna hijau adalah kode warna pada kalimat yang akan mengikuti
1. Masuk ke Dasboard lalu klik Blog sobat 2. Pilih ke Template 3. Lalu pilih Edit HTML dan pilih lanjutkan 4. Centang Expand Template Widget 5. Cari kode <body>(Gunakan CTRL+F atau F3 Untuk mempercepat pencarian) 6. Setelah ketemu letakan kode berikut tepat di atas kode yang tadi
1. Masuk ke Dasboard lalu klik Blog sobat 2. Pilih ke Template 3. Lalu pilih Edit HTML dan pilih lanjutkan 4. Centang Expand Template Widget 5. Cari kode </head>(Gunakan CTRL+F atau F3 Untuk mempercepat pencarian) 6. Setelah ketemu letakan kode berikut tepat di atas kode yang tadi
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'> </script> <script type='text/javascript'> var dur = 400; // Duration Of Animation in Milli Seconds $(document).ready(function() { $('a.linknudge').hover(function() { $(this).animate({ paddingLeft: '25px' }, dur); }, function() { $(this).animate({ paddingLeft: 0 }, dur); }); }); // end of Jquery Script </script>
7. Simpan deh Templatenya Bagi yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya
Keterangan:
Untuk kode bewarna biru adalah kelebaran link bergoyang
Apa sih maksud dari judul posting ini? Sebenarnya kali ini Tutorial Blogger akan mengajarkan tutorial untuk menghilangkan icon obeng. Icon tersebut biasanya akan muncul ketika kita sedang mengedit template dan melihat hasil templatenya pasti pada sudut elemen template tersebut ada icon berbentuk obeng/ tang. Contohnya pada screenshot (gambar) disamping ini. Icon ini biasanya sering disebut para blogger senior dengan Quick Edit artinya Mengedit secara cepat, akan tetapi para pengunjung tidak dapat melihat icon ini. Hanya sang pemilik blog lah yang dapat melihatnya.
Ada juga loh para blogger yang tidak senang dengan kehadirannya. Salah satunya Tutorial Blogger, alasannya cukup sedeharna. Yaitu membuat mata tidak sedap, terlihat aneh, DLL. Nah jika sobat juga berpikiran sama dengan Tutorial Blogger, Lebih baik kita hapus saja ya??
2. Pilih ke Template 3. Lalu pilih Edit HTML dan pilih lanjutkan 4. Centang Expand Template Widget 5. Cari kode ]]></b:skin>(Gunakan CTRL+F atau F3 Untuk mempercepat pencarian) 6. Setelah ketemu letakan kode berikut tepat di atas kode yang tadi
.quickedit{
display:none; }
7. Simpan deh Templatenya. Bagi yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya
Coba deh sobat lihat obeng yang ada di sisi elemen template sobat?? Sekarang sudah hilangkan?? Apakah terlihat lebih keren?? Ataupun terlihat lebih buruk?? Menurut Tutorial Blogger sih nambah keren.
Kali ini saya akan mengajarkan tutorial kepada sobat berupa tutorialMembuat efek gelembung pada kursor, tentu saja efek ini berbeda dengan yang satu ini. Efek ini akan mengeluarkan segumpalan gelembung naik ke atas yang keluar dari kursor jadi kursor sobat akan terlihat lebih menarik. Tentu saja efek ini memiliki banyak keuntungan diantaranya Tidak membuat blog berat, tidak membutuhkan banyak ruang, sangat unik, dan sangat menarik. Masih kurang percaya dengan tutorial blogger? Kalau masih gak percaya di coba aja.
1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat 2. Pilih Tata Letak , lalu Tambah Gadget 3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
4. Lalu muncul halaman baru lagi
5. Kosongkan Judul, dan isikan kode berikut pada kontennya
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript"> // <![CDATA[ var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles var bubbles=100; // maximum number of bubbles on screen
var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var bubb=new Array(); var bubbx=new Array(); var bubby=new Array(); var bubbs=new Array();
window.onload=function() { if (document.getElementById) { var rats, div; for (var i=0; i<bubbles; i++) { rats=createDiv("3px", "3px"); rats.style.visibility="hidden";
function bubble() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<bubbles; c++) if (!bubby[c]) { bubb[c].left=(bubbx[c]=x)+"px"; bubb[c].top=(bubby[c]=y)+"px"; bubb[c].width="3px"; bubb[c].height="3px" bubb[c].visibility="visible"; bubbs[c]=3; break; } } for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c); setTimeout("bubble()", 40); }
function update_bubb(i) { if (bubby[i]) { bubby[i]-=bubbs[i]/2+i%2; bubbx[i]+=(i%5-2)/5; if (bubby[i]>sdown && bubbx[i]>0) { if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) { bubb[i].width=bubbs[i]+"px"; bubb[i].height=bubbs[i]+"px"; } bubb[i].top=bubby[i]+"px"; bubb[i].left=bubbx[i]+"px"; } else { bubb[i].visibility="hidden"; bubby[i]=0; return; } } } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sleft; x=(e)?e.pageX:event.x+sdown; }
window.onresize=set_width; function set_width() { if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (typeof(self.innerHeight)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } else { swide=800; shigh=600; } } window.onscroll=set_scroll; function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height; div.style.width=width; div.style.overflow="hidden"; return (div); } // ]]> </script>
6. Setelah itu simpan
Bagaimana sobat efek gelembungnya sudah kelihatan kan?? Beri tepuk tangan dong buat tutorial blogger dan jangan sungkan-sungkan untuk memberi pujian kepada tutorial blogger, hehehe. Oh ya jangan lupa ya bersihkan sisa-sisa gelembungnya dengan kain lap!!
Tambahan: Untuk kode yang berbackground biru adalah warna gelembung Untuk kode yang berbackground hijau adalah jumlah gelembung yang akan muncul
